<%@ page import="com.zwy.Shopping.model.User" %>
<%@ page import="com.zwy.Shopping.model.OrderItem" %>
<%@ page import="com.zwy.Shopping.dao.OrderDao" %>
<%@ page import="com.zwy.Shopping.model.Order" %>
<%@ page import="com.zwy.Shopping.dao.impl.OrderDaoImpl" %>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.zwy.Shopping.dao.OrderItemDao" %>
<%@ page import="com.zwy.Shopping.dao.impl.OrderItemDaoImpl" %><%--
  Created by IntelliJ IDEA.
  User: Peter Zhou
  lesson: 表格标签不要嵌套表格标签会导致</table>匹配错误
  To change this template use File | Settings | File Templates.
  我的订单界面
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.bundle.js"></script>
<script>
<%--取消订单触发函数--%>
    function cancelOrder(OrderId) {
        // 使用 AJAX 发送请求到服务器
        var xhr = new XMLHttpRequest();
        xhr.open("POST", "cancel_order", true); // 向cancel_order服务端口,发起上传请求
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//请求头的

        xhr.onreadystatechange = function () {//回调函数,readystate改变调用
            if (xhr.readyState === 4 && xhr.status === 200) {
                // 请求已完成且成功
                console.log(xhr.responseText); // 打印服务器的响应内容
                // 在这里您可以处理响应，比如更新页面上的某些元素
            } else if (xhr.readyState === 4 && xhr.status !== 200) {
                // 请求已完成但出现了错误
                console.error("请求失败: " + xhr.statusText);
            }
        };

        // 发送包含 orderId 的数据到服务器
        xhr.send("OrderId=" + encodeURIComponent(OrderId));
        location.reload();//更新当前界面
    }
</script>
<head>
    <meta charset="UTF-8">
    <title>我的订单</title>
    <jsp:include page="includes/nav.jsp"></jsp:include>
</head>
<body>
<div class="container-fluid mt-3">
<%--    获取user对象--%>
    <% User user = (User) request.getSession().getAttribute("user");
        OrderDao orderDao = new OrderDaoImpl();
        //OrderItemDao orderItemDao = new OrderItemDaoImpl();
        if (user == null) {
            request.setAttribute("message", "请登录后查看");
            request.setAttribute("page", "login.jsp");
            request.getRequestDispatcher("alert.jsp").forward(request, response);
        }
//        找到用户对应的订单信息
        List<Order> orders = orderDao.getOrderByUserId(user.getId());
        if(orders == null){
            request.setAttribute("message", "你并没有购买商品,请购买后尝试");
            request.setAttribute("page", "index.jsp");
            request.getRequestDispatcher("alert.jsp").forward(request, response);
        }
    %>
    <table class="table-info table table-hover table-striped" style="margin-top: 40px;">
        <thead>
        <tr style="margin-top: 20px">
            <th class="col-sm-4">时间</th>
            <th class="col-sm-4">总价</th>
            <th class="col-sm-4">取消</th>
        </tr>
        </thead>
        <tbody>
<%--        对订单进行查找--%>
        <%for (Order order : orders) {%>
        <tr class="table-hover table-striped">
             <%List<OrderItem> orderItems = order.getOrderItems();%>
            <td><%=order.getDate()%>
            </td>
            <td>￥<%=order.getTotal()%>
            </td>

            <td><button class="btn btn-danger"   onclick="cancelOrder(<%=order.getId()%>)">取消订单</button></td>

        </tr>

        <tr>
           <%for (OrderItem orderItem : orderItems){%>
                <tbody>
                <tr>
                    <td><%=orderItem.getProduct().getName()%><img class="img-thumbnail" src="img/<%=orderItem.getProduct().getImage()%>" style="width: 100px;"></td>
                    <td class="align-content-center"><%=orderItem.getProduct().getCategory().getName()%></td>
                    <td class="align-content-center"><%=orderItem.getProduct().getPrice()%>￥</td>
                    <td class="align-content-center"><%=orderItem.getQuantity()%></td>
                    <td class="align-content-center"><%=orderItem.getTotal()%>￥</td>
                </tr>
                </tbody><%}%>

        </tr>

        <%}%>

        </tbody>
    </table>
</div>
</body>
</html>
